<template>
	<view class="group_1 flex-col">
		<carHeader :navigationBarStyle="{ iconText: '个人中心'}"></carHeader>

		<view class="section_1 flex-col">
			<view class="mst20">
				<text class="text_1">{{userInfo.nickName}}</text>
				<view class="box_2 flex-col">
					<view class="section_2 flex-col">
						<view class="box_3 flex-col">
							<image class="box_3_img" referrerpolicy="no-referrer" :src="userInfo.avatarUrl" />
						</view>
					</view>
				</view>
			</view>

			<view class="box_4 flex-row">
				<image class="label_2" referrerpolicy="no-referrer"
					src="/static/icon/userHome/psjrhld3fgt7n1rnb7570efik45kwjbth6p8a5a30e2-95cd-4802-820c-9a3958ca8463.png" />
				<text class="text_2">我要开店</text>
				<text class="text_3">联系软件客户</text>
			</view>

			<view class="mubox">
				<view class="muitem">
					<image class="label_3" referrerpolicy="no-referrer"
						src="/static/icon/userHome/psfi0u5j3qunazgubhchbwe4xjx7v4silnb1440875-f7d9-4cf6-9b53-6903820266b6.png" />
					<text class="text_9">储值余额</text>
					<text class="text_4">
						<text class="text_4_1">￥</text>
						<text class="text_4_2">0.00</text>
					</text>
				</view>
				<view class="muitem" @click="pushOrderList">
					<image class="label_4" referrerpolicy="no-referrer"
						src="/static/icon/userHome/ps327z5w9zf69eov91k9rgjj3gjzeztlqydc748541-214e-4e12-a7fd-b30aede4c5f6.png" />
					<text class="text_9">我的订单</text>
				</view>
				<view class="muitem" @click="pushCouponList">
					<image class="label_5" referrerpolicy="no-referrer"
						src="/static/icon/userHome/pslpcoa0yv9gh3s5dyoohcfw1zyetu85vi819880af-5c6a-4543-913a-f4638e14669b.png" />
					<text class="text_9">我的优惠券</text>
				</view>
			</view>

			<view class="mubox" style="margin-top: 50rpx;">
				<view class="muitem" @click="pushHistoryVisit">
					<image class="label_6" referrerpolicy="no-referrer"
						src="/static/icon/userHome/ps8tca8ycutdu4myc0xin84cugsk0qdbiy2c52347c-03fa-4097-8e7c-d8f400298428.png" />
					<text class="text_9">历史访问店铺</text>
				</view>
				<view class="muitem">
					<image class="label_7" referrerpolicy="no-referrer"
						src="/static/icon/userHome/pstcy92pfflx5ln52v9se7xu5pxiuyqd3896582de-a3f1-40d9-8950-d8f72b3f633e.png" />
					<text class="text_9">改名分享历史</text>
				</view>
				<view @click="showAddress" class="muitem">
					<image class="label_8" referrerpolicy="no-referrer"
						src="/static/icon/userHome/ps1gxyzj0procq528df68hbc5lb2liaycl1abc1620-acca-49e3-a49d-e01e64c7d9a1.png" />
					<text class="text_9">我的收货地址</text>
				</view>
			</view>
		</view>
		<!-- 我的收货地址 -->
		<u-modal :asyncClose="true" :show="addressShow" :showCancelButton="true" @confirm="confirm"
			@cancel="addressShow=false" cancelColor="#333333" cancelText="关闭" confirmColor="#E86C64" confirmText="保存"
			ref="uModal" style="padding: 0;">
			<view class="address-box">
				<view class="address-title">收货地址 </view>
				<view class="address-from">
					<u-form :labelWidth="100" :model="addressParams" :rules="rules" labelPosition="left" ref="form1">
						<u-form-item :required="true" borderBottom label="联系人" prop="receiveName" ref="item1">
							<u-input border="none" v-model="addressParams.receiveName"></u-input>
						</u-form-item>
						<u-form-item :required="true" borderBottom label="联系电话" prop="receivePhone">
							<u-input border="none" v-model="addressParams.receivePhone"></u-input>
						</u-form-item>
						<u-form-item :required="true" label="收货地址" prop="receiveAdress" ref="item12">
							<u-input border="none" v-model="addressParams.receiveAdress"></u-input>
						</u-form-item>
					</u-form>
				</view>
			</view>
		</u-modal>
		<!-- 我的收货地址 -->

		<z-navigation></z-navigation>
	</view>
</template>

<script>
	import store from "@/store";
	import $http from "@/config/requestConfig";
	export default {
		data() {
			return {
				addressShow: false,
				firstAdd: false,
				userInfo: {},
				addressParams: {
					address: "",
					receiveAdress: "",
					receiveName: "",
					receivePhone: "",
					label: "",
				},
				rules: {
					"receiveName": {
						type: "string",
						required: true,
						message: "请填写联系人",
						trigger: ["blur", "change"],
					},
					"receivePhone": {
						type: "number",
						required: true,
						message: "请填写联系电话",
						trigger: ["blur", "change"],
					},
					"receiveAdress": {
						type: "string",
						required: true,
						message: "请填写收货地址",
						trigger: ["blur", "change"],
					},
				},
			};
		},
		onLoad() {
			const wxinfo = uni.getStorageSync('wxInfo');
			if (wxinfo) {
				this.userInfo = wxinfo
			}
		},
		methods: {
			showAddress() {
				$http
					.get("receive/getCurrentUserReceive", {})
					.then((res) => {
						console.log(res);
						if (res) {
							this.addressParams = res;
							this.firstAdd = false;
						} else {
							this.firstAdd = true;
						}
						this.addressShow = true;
					})
					.catch((err) => {
						this.firstAdd = true;
						this.addressShow = true;
					});
			},
			confirm() {
				this.$refs.form1.validate().then(res => {
					this.addressParams.address = this.addressParams.receiveAdress
					// this.addressParams.buyerUserId = 
					$http.post(this.firstAdd ? "receive/save" : "receive/update", this.addressParams).then(
						(res) => {
							if (res) {
								this.firstAdd = false;
								this.addressShow = false;
								uni.showToast({
									title: "操作成功",
								});
							}
						});
				}).catch(errors => {
					uni.$u.toast('请检查数据是否完整')
				})
			},
			pushOrderList() {
				uni.navigateTo({
					url: '/pages/order/orderList',
				});
			},
			pushHistoryVisit() {
				uni.navigateTo({
					url: '/pages/userHome/historyVisitStore',
				});
			},
			pushCouponList() {
				uni.navigateTo({
					url: '/pages/userHome/couponList',
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.group_1 {
		background-color: rgba(255, 255, 255, 1);
		width: 750rpx;
		height: calc(100vh - 100rpx);
		overflow-y: auto;
	}

	.image_1 {
		width: 710rpx;
		height: 19rpx;
		margin: 11rpx 0 0 20rpx;
	}

	.section_1 {
		z-index: 1;
		position: relative;
		margin-bottom: 1rpx;
		margin-top: 50rpx;
	}

	.box_1 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 30rpx;
		height: 60rpx;
		width: 180rpx;
		margin: 24rpx 0 0 540rpx;
	}

	.group_2 {
		border-radius: 30rpx;
		width: 180rpx;
		height: 60rpx;
		border: 1rpx solid rgba(226, 226, 226, 1);
	}

	.group_3 {
		background-color: rgba(33, 33, 33, 1);
		border-radius: 50%;
		width: 8rpx;
		height: 8rpx;
		margin: 27rpx 0 0 25rpx;
	}

	.group_4 {
		background-color: rgba(33, 33, 33, 1);
		border-radius: 50%;
		width: 13rpx;
		height: 13rpx;
		margin: 24rpx 0 0 4rpx;
	}

	.group_5 {
		background-color: rgba(33, 33, 33, 1);
		border-radius: 50%;
		width: 8rpx;
		height: 8rpx;
		margin: 27rpx 0 0 4rpx;
	}

	.group_6 {
		width: 1rpx;
		height: 43rpx;
		border: 1rpx solid rgba(226, 226, 226, 1);
		margin: 9rpx 0 0 28rpx;
	}

	.label_1 {
		width: 34rpx;
		height: 34rpx;
		margin: 13rpx 26rpx 0 29rpx;
	}

	.text_1 {
		width: 166rpx;
		height: 40rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 42rpx;
		font-family: PingFangSC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 42rpx;
		margin: 118rpx 0 0 202rpx;
	}

	.box_2 {
		height: 123rpx;
		background: url("/static/icon/userHome/psv8349zf5hcg8k32m7k5nqu49tgzpgls5w06fb89df-daa5-4950-9252-15ddfdbdbcd5.png") -1rpx 0rpx no-repeat;
		background-size: 750rpx 123rpx;
		margin-top: -16rpx;
		width: 749rpx;
	}

	.section_2 {
		border-radius: 50%;
		height: 140rpx;
		border: 8rpx solid rgba(240, 240, 240, 1);
		width: 140rpx;
		margin: -45rpx 0 0 560rpx;
	}

	.box_3 {
		border-radius: 50%;
		width: 124rpx;
		height: 124rpx;

		.box_3_img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.box_4 {
		width: 650rpx;
		height: 108rpx;
		border: 4rpx solid rgba(240, 240, 240, 1);
		margin: 50rpx;
		border-radius: 12rpx;
		align-items: center;
	}

	.label_2 {
		width: 41rpx;
		height: 34rpx;
		margin-left: 30rpx;
	}

	.text_2 {
		width: 134rpx;
		height: 32rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 34rpx;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin: 1rpx 0 0 40rpx;
	}

	.text_3 {
		width: 199rpx;
		height: 32rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 34rpx;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin: 1rpx 0 0 175rpx;
	}

	.box_5 {
		width: 216rpx;
		height: 32rpx;
		margin: 128rpx 0 0 81rpx;
	}

	.label_3 {
		width: 40rpx;
		height: 32rpx;
	}

	.text_4 {
		width: 135rpx;
		height: 32rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 34rpx;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin-left: 270rpx;
	}

	.text_4_1 {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.text_4_2 {
		font-size: 36rpx;
		font-family: SF UI Text;
		font-weight: bold;
		color: #999999;
	}

	.box_6 {
		width: 215rpx;
		height: 37rpx;
		margin: 73rpx 0 0 81rpx;
	}

	.label_4 {
		width: 40rpx;
		height: 37rpx;
	}

	.text_5 {
		width: 134rpx;
		height: 32rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 34rpx;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin-top: 2rpx;
	}

	.box_7 {
		width: 250rpx;
		height: 33rpx;
		margin: 68rpx 0 0 80rpx;
	}

	.label_5 {
		width: 42rpx;
		height: 31rpx;
		margin-top: 2rpx;
	}

	.text_6 {
		width: 168rpx;
		height: 33rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 34rpx;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
	}

	.box_8 {
		width: 285rpx;
		height: 42rpx;
		margin: 124rpx 0 0 79rpx;
	}

	.label_6 {
		width: 44rpx;
		height: 42rpx;
	}

	.text_7 {
		width: 202rpx;
		height: 33rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 34rpx;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin-top: 4rpx;
	}

	.box_9 {
		width: 283rpx;
		height: 44rpx;
		margin: 66rpx 0 0 80rpx;
	}

	.label_7 {
		width: 43rpx;
		height: 44rpx;
	}

	.text_8 {
		width: 201rpx;
		height: 32rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 34rpx;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin-top: 6rpx;
	}

	.box_10 {
		width: 284rpx;
		height: 39rpx;
		margin: 59rpx 0 0 80rpx;
	}

	.label_8 {
		width: 43rpx;
		height: 39rpx;
	}

	.text_9 {
		width: 202rpx;
		height: 32rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 34rpx;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin-top: 4rpx;
		margin-left: 40rpx;
	}

	.box_11 {
		width: 696rpx;
		height: 90rpx;
		margin: 92rpx 0 1009rpx 0;
	}

	.box_12 {
		background-color: rgba(253, 253, 253, 1);
		height: 90rpx;
		width: 499rpx;
	}

	.group_7 {
		width: 499rpx;
		height: 90rpx;
		background: url("/static/icon/userHome/psl1fb8yggdtnrvvlsnv2koto74udribbiac34afdf-5141-4148-b1d2-a6638d056f02.png") 100% no-repeat;
		background-size: 100% 100%;
	}

	.text_10 {
		width: 64rpx;
		height: 32rpx;
		color: rgba(153, 153, 153, 1);
		font-size: 34rpx;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin: 29rpx 0 0 93rpx;
	}

	.group_8 {
		background-color: rgba(153, 153, 153, 0.16);
		width: 1rpx;
		height: 90rpx;
		margin-left: 92rpx;
	}

	.text_11 {
		width: 97rpx;
		height: 32rpx;
		color: rgba(153, 153, 153, 1);
		font-size: 34rpx;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin: 29rpx 76rpx 0 76rpx;
	}

	.box_13 {
		width: 144rpx;
		height: 36rpx;
		margin-top: 29rpx;
	}

	.text_12 {
		width: 134rpx;
		height: 33rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 34rpx;
		font-family: PingFangSC-Semibold;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin-left: 5rpx;
	}

	.group_9 {
		background-color: rgba(234, 150, 149, 1);
		border-radius: 6rpx;
		width: 144rpx;
		height: 12rpx;
		margin-top: -9rpx;
	}

	.box_14 {
		border-radius: 12rpx;
		z-index: 36;
		position: absolute;
		left: 50rpx;
		top: 310rpx;
		width: 650rpx;
		height: 108rpx;
		border: 4rpx solid rgba(240, 240, 240, 1);
	}

	.text_13 {
		width: 16rpx;
		color: rgba(153, 153, 153, 1);
		font-size: 28rpx;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
		margin: 49rpx 0 0 519rpx;
	}

	.text_14 {
		width: 80rpx;
		color: rgba(153, 153, 153, 1);
		font-size: 36rpx;
		font-family: SFUIText-Bold;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
		margin: 42rpx 31rpx 0 7rpx;
	}

	.image-wrapper_1 {
		z-index: 38;
		height: 322rpx;
		background: url("/static/icon/userHome/ps9mmey18d2z3n8s3qleupyxjq1y10ck590be7e545-e5c8-43b1-bbc7-18e48b31e962.png") 100% no-repeat;
		background-size: 100% 100%;
		width: 653rpx;
		position: absolute;
		left: 48rpx;
		top: 830rpx;
	}

	.image_2 {
		width: 650rpx;
		height: 114rpx;
		margin-left: 2rpx;
	}

	.mt20 {
		margin-top: 50rpx;
	}

	.mubox {
		width: 653rpx;
		background: url("/static/icon/userHome/psljcvt33h7r982sskgknbrau2cz9a8s3kmb6b3e06c-6778-40f0-8a8d-6793cc10c3e4.png") 100% no-repeat;
		background-size: 100% 100%;
		margin: 0 50rpx;

		.muitem {
			width: 650rpx;
			height: 114rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
		}
	}

	.address-box {
		width: 100%;

		.address-title {
			height: 137rpx;
			border-bottom: 1rpx solid rgba(153, 153, 153, 0.2);
			line-height: 137rpx;
			text-align: center;
		}

		.address-from {
			padding: 0 30rpx 0 60rpx;
		}
	}

	/deep/ .u-modal__content {
		padding: 0 !important;
	}
</style>
